<!DOCTYPE HTML>
<html lang="zh-cn">
 
<head>
<meta charset="utf-8" />
<title></title>

<link href="/static/lib/tree-grid/bootstrap.min.css" rel="stylesheet">
<link href="/static/lib/tree-grid/bootstrap-table.min.css" rel="stylesheet">
<link  href="/static/lib/tree-grid/jquery.treegrid.min.css" rel="stylesheet">
<link href="/static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" ></link>
<link href="/static/lib/layer/layer.dev.css" rel="stylesheet" id="layui_layer_skinlayercss">
<link href="/static/lib/layer/layer.ext.css" rel="stylesheet" id="layui_layer_skinlayerextcss">
<link  href="/static/lib/sweetalert/sweetalert.css"  rel="stylesheet">
</head>
 
<body style="font-size:1.5em;">
<div id="container" class="container" style="width: 100%">
<table id="table"></table>
</div>
</body>
<script src="/static/lib/tree-grid/jquery.min.js"></script>
<script src="/static/lib/tree-grid/bootstrap-table.min.js"></script>
<script src="/static/lib/tree-grid/bootstrap-table-treegrid.js"></script>
<script src="/static/lib/tree-grid/jquery.treegrid.min.js"></script>
<script src="/static/lib/vue/vue.min.v2.js" type="text/javascript" ></script>

<script src="/static/lib/jquery-validation/jquery.validate.min.js" type="text/javascript" ></script>
<script src="/static/lib/jquery-validation/localization/messages_zh.min.js" type="text/javascript" ></script>
<script src="/static/lib/routie/routie.min.js" type="text/javascript" ></script>
<script src="/static/lib/store/store.min.js" type="text/javascript" ></script>
<script src="/static/lib/pace/pace.min.js" type="text/javascript" ></script>
<script src="/static/lib/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/static/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="/static/lib/sweetalert/sweetalert.min.js" type="text/javascript" ></script>
<script src="/static/lib/layer/layer.dev.js" type="text/javascript" ></script>
<script src="/static/lib/layer/layer.ext.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.alert.swal.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.core.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.ajax.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.util.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.storage.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.vue.directive.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.routie.newPage.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.layer.editDialog.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.permisison.js" type="text/javascript" ></script>

<script type="text/javascript">
var $table = $('#table');
$(function(){
	var ajaxUrl="/manager/algorithm/config/loadConfigTreeGrid";
	 zfesAjax.ajaxTodo(ajaxUrl, { "algorithmId" : store.get("ifream_param_").algorithmId}, function(data) {
		 console.log(data.data.treeGrid)
		 initTtreGrid(data.data.treeGrid);
	});
});

 
    function initTtreGrid(data) {
    	 $table.bootstrapTable({
             data: data,
             idField: 'id',
             dataType:'json',
             columns: [
                 { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                         if (row.check == true) {
                             return {  checked: true };
                         }
                     }
                 },
                 { field: 'name',  title: '名称' },
                 { field: 'code',  title: '编码' },
                 { field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },
                { field: 'remark', title: '备注'  },
                 { field: 'operate', title: '操作', align: 'center',  events : operateEvents, formatter: 'operateFormatter' },
             ],
  
             //在哪一列展开树形
             treeShowField: 'name',
             //指定父id列
             parentIdField: 'parentId',
  
              onResetView: function(data) {
                 //console.log('load');
                 $table.treegrid({
                     initialState: 'expanded',// 所有节点都折叠
                     // initialState: 'expanded',// 所有节点都展开，默认展开
                     treeColumn: 1,
                     // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                     // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                     onChange: function() {
                         $table.bootstrapTable('resetWidth');
                     }
                 });
  
                 //只展开树形的第一级节点
                 $table.treegrid('getRootNodes').treegrid('expand');
  
             }, 
              onCheck: function(row){
                 var datas = $table.bootstrapTable('getData');
                 // 勾选子类
                 selectChilds(datas,row,"id","parentId",true);
  
                 // 勾选父类
                 selectParentChecked(datas,row,"id","parentId")
  
                 // 刷新数据
                 $table.bootstrapTable('load', datas);
             },
  
             onUncheck: function(row){
                 var datas = $table.bootstrapTable('getData');
                 selectChilds(datas,row,"id","parentId",false);
                 $table.bootstrapTable('load', datas);
             }, 
         });
    }
 
    // 格式化按钮
    function operateFormatter(value, row, index) {
    	if(row.parentId==0){
    		  return [
    			    '<button type="button" class="RoleOfadd btn  btn-success" style="margin-left:-160px;"><i class="fa fa-plus" ></i>&nbsp;新增子级配置项</button>',
    	            //'<button type="button" class="RoleOfdelete btn-small   btn-danger" style="margin-left:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
    	        ].join('');
    	}else{
    		return [
                '<button type="button" class="RoleOfadd btn btn-success" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增子级配置项</button>',
                '<button type="button" class="RoleOfedit btn   btn-warning" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
                '<button type="button" class="RoleOfdelete btn  btn-danger" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
            ].join('');
    	}
    	
        
 
    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {  return '菜单';  }
        if (value === 'button') {  return '按钮'; }
        if (value === 'api') {  return '接口'; }
        return '-';
    }
    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }
 
    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfadd': function (e, value, row, index) {
            add(row.id);
        },
        'click .RoleOfdelete': function (e, value, row, index) {
            del(row.id);
        },
        'click .RoleOfedit': function (e, value, row, index) {
            update(row.id);
        }
    };
    function selectChilds(datas,row,id,parentId,checked) {
        for(var i in datas){
            if(datas[i][parentId] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,parentId,checked);
            };
        }
    }
 
    function selectParentChecked(datas,row,id,parentId){
        for(var i in datas){
            if(datas[i][id] == row[parentId]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,parentId);
            };
        }
    }
 
    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }
 
        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);
 
    }
 
    function add(id) {
    	parent.anewaz.addChildConfig(id);
    }
    function update(id) {
    	parent.anewaz.editConfig(id);
    }
    
    function del(id) {
    	parent.anewaz.setConfigEnable(id,0);
    }

 
</script>
</html>